import 'package:flutter/material.dart';

///x性能优化
///1.打开flutter的视图
///2.勾选Track Widget rebuilds
///3.{注意观察用户操作时ui的渲染情况}
///4.修改后测试的列子
class PerformanceDemo extends StatefulWidget {
  @override
  _PerformanceDemoState createState() => _PerformanceDemoState();
}

class _PerformanceDemoState extends State<PerformanceDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("性能优化"), centerTitle: true),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            color: Colors.red,
            height: 100,
          ),
          ///1.修改钱前
          /// Container(
          ///   width: double.infinity,
          ///   color: Colors.yellow,
          ///   height: 100,
          ///   child: GestureDetector(
          ///     child: Text(count.toString()),
          ///     onTap: () {
          ///       setState(() {
          ///         count++;
          ///       });
          ///     },
          ///   ),
          /// ),
          /// 2.修改后
          Container(
            width: double.infinity,
            color: Colors.yellow,
            height: 100,
            child: CountWidget(),
          ),
          Container(
            width: double.infinity,
            color: Colors.blue,
            height: 100,
          ),
        ],
      ),
    );
  }
}

///otherChild
class CountWidget extends StatefulWidget {
  const CountWidget({Key? key}) : super(key: key);

  @override
  _CountWidgetState createState() => _CountWidgetState();
}

class _CountWidgetState extends State<CountWidget> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Text(count.toString()),
      onTap: () {
        setState(() {
          count++;
        });
      },
    );
  }
}
